<template>
  <div>
    <!-- 用工签约 -->
    <el-dialog
      v-model="employmentContractVisible"
      title="用工签约"
      width="70%"
      @close="employmentContractClose"
    >
      <el-form
        ref="employmentContractFormRef"
        :model="employmentContractForm"
        label-width="auto"
      >
        <el-form-item
          label="选择企业"
          prop="merId"
        >
          <el-select
            v-model="employmentContractForm.merId"
            placeholder="请选择企业"
            clearable
            filterable
            @change="merChange"
          >
            <el-option
              v-for="(item,i) in merList"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="选择服务商"
          prop="sydId"
        >
          <el-select
            v-model="employmentContractForm.sydId"
            placeholder="请选择服务商"
            clearable
            filterable
            @change="sydChange"
          >
            <el-option
              v-for="(item,i) in sydList"
              :label="item.gsmc"
              :value="item.id"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="选择业务类型"
          prop="busType"
        >
          <el-select
            v-model="employmentContractForm.busType"
            placeholder="请选择业务类型"
            clearable
            filterable
            @change="busTypeChange"
          >
            <el-option
              v-for="(item,i) in busTypeList"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <el-card>
        <el-table
          :data="operlist"
          border
          :row-key="getRowKey"
          @select="getSelectFun"
          @select-all="handleSelectionAll"
        >
          <el-table-column
            type="selection"
            width="40"
            align="center"
            column-key="workId"
            :reserve-selection="true"
          />
          <el-table-column
            label="用工姓名"
            align="center"
            min-width="160"
            prop="workName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="身份证号"
            align="center"
            min-width="160"
            prop="cardId"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="手机号"
            align="center"
            min-width="160"
            prop="vPhone"
          />
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="listOperFun"
        />
      </el-card>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="employmentContractVisible = false">取消</el-button>
          <el-button
            type="primary"
            :loading="submitLoading1"
            @click="employmentContractSubmitFun('all')"
          >
            全部提交
          </el-button>
          <el-button
            type="primary"
            :loading="submitLoading"
            :disabled="Array.isArray(checkLine)&&checkLine.length?false:true"
            @click="employmentContractSubmitFun()"
          >
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="employmentContract" lang="ts">
import api from '@/api/workMag/contractInquiry';
import { EmploymentContractForm, MerVo, OperVo, SydVo } from '@/api/workMag/contractInquiry/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { wxfe_bus_type } = toRefs<any>(proxy?.useDict('wxfe_bus_type'));
const emit = defineEmits(['getList'])
const total = ref(0);
const queryParams = ref<PageQuery>({
  pageNum: 1,
  pageSize: 10
});
const  submitLoading = ref(false);
const submitLoading1 = ref(false);

// 用工签约
const employmentContractVisible = ref(false);
const employmentContractFormRef = ref<ElFormInstance>();
const employmentContractForm = ref<EmploymentContractForm>({
  merId: '',
  sydId: '',
  busType: '',
  workIds: '',
  pageNum: 1,
  pageSize: 10
});

const merList = ref<MerVo[]>([]);
const sydList = ref<SydVo[]>([]);
const busTypeList = ref<DictDataOption[]>([]);
const operlist = ref<OperVo[]>([]);

const employmentContractFun = async () => {
  employmentContractVisible.value = true;
  const res = await api.listMer();
  console.log(res);
  merList.value = res.data;
};

const merChange = async (e: any) => {
  sydList.value = [];
  employmentContractForm.value.sydId = '';
  busTypeList.value = [];
  employmentContractForm.value.busType = '';
  if (!employmentContractForm.value.merId) return;
  const res = await api.listServ(e);
  console.log(res);
  sydList.value = res.data;
};
const sydChange = async (e: any) => {
  busTypeList.value = [];
  employmentContractForm.value.busType = '';
  if (!employmentContractForm.value.merId || !employmentContractForm.value.sydId) return;
  const res = await api.selBtByMs(employmentContractForm.value);
  if (res.data && res.data.length) {
    wxfe_bus_type.value.forEach((e: DictDataOption) => {
      res.data.forEach((el: any) => {
        if (e.value == el) {
          busTypeList.value.push(e);
        }
      });
    });
  }
};
const busTypeChange = async () => {
  operlist.value = [];
  if (!employmentContractForm.value.merId || !employmentContractForm.value.sydId || !employmentContractForm.value.busType) return;
  listOperFun();
};
const listOperFun = async () => {
  const res = await api.listOper(employmentContractForm.value);
  operlist.value = res.rows;
};

const employmentContractSubmitFun = async (type?: string) => {
  let workIds: any = checkLine.value?.map((item: OperVo) => item.workId);
  console.log({ ...employmentContractForm.value, workIds: checkLine.value?.toString() });
  console.log(checkLine.value, workIds);

  if (type == 'all') {
    submitLoading1.value = true;
    const res = await api.addAllUwb(employmentContractForm.value);
    ElMessage.success('提交成功！');
    employmentContractClose();
    submitLoading1.value = false;
    console.log('all', res);
  } else {
      submitLoading.value = true;
    const res = await api.addSelUwb({ ...employmentContractForm.value, workIds: workIds.toString() });
    ElMessage.success('提交成功！');
    employmentContractClose();
    submitLoading.value = false;

    console.log('one', res);
  }

  emit('getList',{});
};
const employmentContractClose = () => {
  operlist.value = [];
  employmentContractVisible.value = false;
  employmentContractFormRef.value?.resetFields();
};
// table 选择行
const getRowKey = (row: any) => {
  return row.workId;
};
let checkLine = ref<OperVo[]>();

const getSelectFun = (data: any, row: any) => {
  checkLine.value = data;
};

// 多选事件
const handleSelectionAll = (objs: any) => {
  console.log(objs);
  checkLine.value = JSON.parse(JSON.stringify(objs));
};

defineExpose({
  employmentContractFun
});
</script>

<style lang="scss" scoped>
</style>
